<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>恒源汽贸工资发放管理系统</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="./manager/dist/css/adminlte.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="./manager/plugins/iCheck/square/blue.css">
    <style>
        .background-style {
            background: url('./manager/dist/img/login_bg.jpg');
            background-size: 100%;
        }

        .login_foot {
            color: #fff;
            position: absolute;
            bottom: 0;
            width: 100%;
            border: 0;
            text-align: center;
            height: 44px;
        }
        .logo-title{
            position:absolute;top:27%;margin-left: 25%;font-size:50px;font-weight:bold;color:#fff;
        }

        #logo{
            margin-left: 20%;margin-top: 5%
        }



        @media screen and (max-width: 750px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
            #logo {
                display: none;
            }
            .logo-title{
                display: none;
            }
            .login-logo{
                margin-top: 200px;
            }
            .loginbox{
                margin-left: auto;
            }
        }
        @media screen and (min-width:1561px) and (max-width:2890px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
            #logo {
                margin-left: 20%;
            }
            .logo-title{
                margin-left: 24%;19890615
                font-size: 2.5rem;
                margin-top: 20px;
            }

            .loginbox{
                margin-top: -5%;margin-right: 20%;margin-left: auto;
            }
        }
        @media screen and (min-width:751px) and (max-width: 1562px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
            #logo {
                margin-left: 10%;
            }
            .logo-title{
                display: none;
            }

            .loginbox{
                margin-top: -5%;margin-right: 20%;margin-left: auto;
            }
        }
    </style>
</head>
<body class="hold-transition login-page background-style">
<img id="logo" src="./manager/dist/img/login_logo.png">
<h2 class="logo-title">陕西恒丰集团" 业务系统门户</h2>
<div class="login-box loginbox">
    <div class="login-logo">
        <a href="#" style="color: white;font-size: 30px;">恒源汽贸工资发放管理系统</a>
    </div>
    <!-- /.login-logo -->
    <div class="card" style="border-radius: 0rem;">

        <div class="card-body login-card-body">
            <p class="login-box-msg" style="color: #1e87f0;font-size: 18px;">账号密码登陆</p>

            <form action="./manager/adminLogin.action" method="post">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fa fa-user"></i></span>
                    </div>
                    <input id="account" name="account" type="text" class="form-control" placeholder="请输入账号">
                </div>
                <!--                <div class="form-group has-feedback">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fa fa-envelope"></i></span>
                                    </div>
                                    &lt;!&ndash;<input type="email" class="form-control" placeholder="Email">&ndash;&gt;
                                    <input id="account" name="account" type="text" class="form-control" placeholder="请输入账号">
                                </div>-->
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fa fa-lock"></i></span>
                    </div>
                    <input id="password" name="password" type="password" class="form-control" placeholder="请输入密码">
                </div>
                <!--                <div class="form-group has-feedback mt-4">
                                    <input id="password" name="password" type="password" class="form-control" placeholder="请输入密码">
                                </div>-->
                <div id="message" class="form-group has-feedback mt-4">

                </div>
                <div class="row mt-2">
                    <!-- /.col -->
                    <div class="w-100">
                        <button id="login" type="button"
                                class="btn btn-primary btn-block btn-flat w-75 ml-auto mr-auto">登录
                        </button>
                    </div>
                    <!-- /.col -->
                </div>
            </form>

            <!-- /.login-card-body -->
        </div>
    </div>
</div>
<div class="login_foot">
    <p>版权所有：陕西恒丰集团</p>
</div>

<!-- /.login-box -->

<!-- jQuery -->
<script src="./manager/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="./manager/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- iCheck -->
<script src="./manager/plugins/iCheck/icheck.min.js"></script>
<script>
    $(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' // optional
        });


        //证照属性设置保存信息
        $("#login").on("click", function login() {

            var account = $("#account").val();
            var password = $("#password").val();
            if (account == "" || password == "") {
                var msg = '<div class="alert alert-danger alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><h5><i class="icon fa fa-ban"></i> 提示!</h5>账号或密码不能为空!</div>';
                $("#message").append(msg);
            } else {
                $("#message").empty();
                var data = $('form').serialize();
                //序列化获得表单数据，结果为：user_id=12&user_name=John&user_age=20
                var submitData = decodeURIComponent(data, true);
                //submitData是解码后的表单数据，结果同上
                var url = encodeURI("./manager/adminLogin.action");
                $.ajax({
                    type: 'POST',
                    url: url,
                    data: data,
                    dataType: "json",
                    success: function (result) {
                        if (result.status == 200) {
                            //刷新表格
                            window.location.href = result.action;
                        } else {
                            //刷新表格
                            var msg = '<div class="alert alert-danger alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><h5><i class="icon fa fa-ban"></i> 提示!</h5>' + result.message + '</div>';
                            $("#message").append(msg);
                        }
                    },
                    dataType: "json"
                });
                if (account == "admin" && password == "hengfeng@2018") {


                } else {

                }
            }

        });


    });
</script>
</body>
</html>
